<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<!-- STYLESHEETS -->
		<!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
		<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
		<link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
		<link rel="stylesheet" type="text/css" href="../../css/responsive.css">

		<link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<!-- file-input -->
		<link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css" />
		<!-- SELECT2 -->
		<link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
		<!-- UNIFORM -->
		<link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css" />
		<!-- datatable -->
		<link rel="stylesheet" href="../../js/datatables/datatable.css">
		<!-- WIZARD -->
		<link rel="stylesheet" type="text/css" href="../../js/bootstrap-wizard/wizard.css" />
		  <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
		<!-- FONTS
	<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-->
		<!-- JQUERY -->
		<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
		<script src="../../js/common.js"></script>
	</head>

	<body>
		<header class="navbar clearfix" id="header">
		</header>

		<!-- PAGE -->
		<section id="page">
			<!-- SIDEBAR -->
			<div id="sidebar" class="sidebar">
				<div class="sidebar-menu nav-collapse">

					<!-- SIDEBAR MENU -->
					<ul>

					</ul>
					<!-- /SIDEBAR MENU -->
				</div>

			</div>
			<!-- /SIDEBAR -->
			<div id="main-content">

				<div class="container">
					<div class="row">
						<div id="content" class="col-lg-12">
							<!-- PAGE HEADER-->
							<div class="row">
								<div class="col-sm-12">
									<div class="page-header">
										<!-- STYLER -->

										<!-- /STYLER -->
										<!-- BREADCRUMBS -->
										<ul class="breadcrumb">
											<li>
												<i class="fa fa-home"></i>
												<a href="index.html">首页</a>
											</li>
											<li>
												<a href="#">商品管理</a>
											</li>
											<li>维护商品</li>
										</ul>
										<!-- /BREADCRUMBS -->

									</div>
								</div>
							</div>
							<!-- /PAGE HEADER -->
							<!-- SAMPLE -->
							<form id="form_coupon">
							<div class="row col-md-12">
								<div class="col-md-3" style="width: 25%;height:200px">
									<div class="" style="text-align: center;margin-top:30%;font-size:24px;">基本信息</div>
								</div>
								<div class="col-md-9">
									<div class="box border primary" style="height:260px">
										<div class="form-group mrg-bt10-right" style="margin-top:10px;">
											<label class="control-label col-md-3"><span class="required">*</span>优惠劵类型：</label>
											<div class="col-md-8 inline">
												<input type="radio" value="Constant" name="couponType" checked/>固定有效期  <input type="radio" value="Postpone" name="couponType"/>顺延有效期
												<span class="error-span"></span>
											</div>
										</div>
										<div class="form-group mrg-bt10-right" style="margin-top:10px;">
											<label class="control-label col-md-3"><span class="required">*</span>优惠劵名称：</label>
											<div class="col-md-8 inline">
												<input type="text" class="form-control width-50" name="couponTitle" onfocus="this.select()" onmouseover="this.onfocus()" placeholder="请输入优惠券名称" maxlength="50" />
												<input type="hidden" name="id" />
												<span class="error-span"></span>
											</div>
										</div>
										<div class="form-group mrg-bt10-right">
											<label class="control-label col-md-3"><span class="required">*</span>发放数量：</label>
											<div class="col-md-8 inline">
												<input type="text" class="form-control width-50" name="sendNum" onkeypress="return $.IsNum(event);" onblur="return $.IsNaN(this);"  onfocus="this.select()" onmouseover="this.onfocus()" placeholder="请输入发放数量" maxlength="10" />

												<span class="error-span"></span>
											</div>
										</div>
										<div class="form-group mrg-bt10-right">
											<label class="control-label col-md-3"><span class="required">*</span>面额：</label>
											<div class="col-md-8 inline">
												<input type="text" class="form-control width-50" name="faceValue" onkeypress="return $.IsNum(event);" onblur="return $.IsNaN(this);"  onfocus="this.select()" onmouseover="this.onfocus()" placeholder="请输入优惠券面额" maxlength="10" />

												<span class="error-span"></span>
											</div>
										</div>
										<div class="form-group mrg-bt10-right">
											<label class="control-label col-md-3"><span class="required">*</span>订单金额:</label>
											<div class="col-md-8 inline" style="text-align: left">
											 <input type="radio" name="limit_group" checked="checked" value="0"/>不限金额</br>
											<div style="display: inline-flex"> <input type="radio" name="limit_group" style="margin-top: 10px" value="1" /><span>满</span>
												<input type="text" class="form-control" style="width:130px;margin-left:10px" name="limitValue" onkeypress="return $.IsNum(event);" onblur="return $.IsNaN(this);"  onfocus="this.select()" onmouseover="this.onfocus()" placeholder="请输入订单金额" maxlength="10" />
												<span>元可使用</span></div>
												<span class="error-span"></span>
											</div>
										</div>
									</div>
								</div>
							</div>
								<div class="row col-md-12">
									<div class="col-md-3" style="width: 25%;height:200px">
										<div class="" style="text-align: center;margin-top:30%;font-size:24px;">规则</div>
									</div>
									<div class="col-md-9">
									<div class="box border primary" style="height:250px;">
										<div class="form-group mrg-bt10-right" style="margin-top:10px">
											<label class="control-label col-md-3"><span class="required">*</span>每人限领：</label>
											<div class="col-md-8 inline" style="text-align: left">
												<input type="text" class="form-control width-50" name="leadNum" onkeypress="return $.IsNum(event);" onblur="return $.IsNaN(this);"  onfocus="this.select()" onmouseover="this.onfocus()" placeholder="限领张数" maxlength="2" />
												(0表示不限张数)
												<span class="error-span"></span>
											</div>
										</div>
										<div class="form-group mrg-bt10-right" id="rangDate">
											<label class="control-label col-md-3"><span class="required">*</span>有效期：</label>
											<div class="col-md-6 inline constantCouponDiv" style="display:inline-flex">
												<input type="text" class="form-control width-50 bootstrap-datepicker" name="startDate" style="width:130px" />-
												<input type="text" class="form-control width-50 bootstrap-datepicker" name="endDate" style="width:130px"/>
												<span class="error-span"></span>
											</div>
											<div class="col-md-6 inline postponeCouponDiv" style="display:none">
												顺延<input type="text" name="postponeDays" />天
												<span class="error-span"></span>
											</div>
										</div>
										<div class="form-group mrg-bt10-right">
											<label class="control-label col-md-3"><span class="required">*</span>可使用商品：</label>
											<div class="col-md-1 inline" style="width: 150px;text-align: left">
											   <input type="radio" checked="checked" />全站通用

											</div>
										</div>
										<div class="form-group mrg-bt10-right">
											<label class="control-label col-md-3">使用说明：</label>
											<div class="col-md-8 inline">
												<textarea name="remark" class="form-control" style="width:280px;resize:none;" ></textarea>
												<span class="error-span"></span>
											</div>
										</div>
										</div>
									</div>
								</div>
								<div class="row" style="height: 30px;">
								<div class="col-md-12" style="text-align: center;">
									<div class="box ">
										<a href="#"  class="btn btn-success config bt-submit" style="width: 100px">
											保存
										</a>
									</div>
								</div>
					    </div>
							</form>
							<!-- /SAMPLE -->

							<div class="footer-tools">
								<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
							</div>
						</div>
						<!-- /CONTENT-->
					</div>
				</div>
			</div>
		</section>
		<!--/PAGE -->
		<!-- JAVASCRIPTS -->
		<!-- Placed at the end of the document so the pages load faster -->

		<!-- BOOTSTRAP -->
		<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

		<!-- BLOCK UI -->
		<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
		<!--bootbox-->
		<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
		<!-- AUTOSIZE -->
		<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
		<!-- spinner -->
		<script src="../../js/spinner/spin.js"></script>
		<!-- INPUT MASK -->
		<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

		<!-- SELECT2 -->
		<script type="text/javascript" src="../../js/select2/select2.min.js"></script>

        <script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
        <script src="../../js/jquery-validate/jquery.validate.min.js"></script>
		<!-- COOKIE -->
		<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
		<!-- CUSTOM SCRIPT -->
		<script src="../../js/script.js"></script>

		<script src="../../js/Sortable.min.js"></script>
		<script>
			var AddCoupon = function() {
			var wizform = $('#form_coupon');
			var formValiInit=function(){
	            wizform.validate({
	                doNotHideMessage: true,
					errorClass: 'error-span',
	                errorElement: 'span',
	                rules: {
	                	couponTitle:{
	                		required:true
	                	},
						leadNum: {
	                        required: true
	                    },
	                    sendNum: {
	                        required: true
	                    },
	                    faceValue:{
	                        required: true
	                    },
	                    limitPrice:{
	                        required: true
	                    }
	                },
	                highlight: function (element) {
	                    $(element)
	                        .closest('.form-group').removeClass('has-success').addClass('has-error');
	                },

	                unhighlight: function (element) {
	                    $(element)
	                        .closest('.form-group').removeClass('has-error');
	                },
	                success: function (label) {
	                    if (label.attr("for") == "gender") {
	                        label.closest('.form-group').removeClass('has-error').addClass('has-success');
	                        label.remove();
	                    } else {
	                        label.addClass('valid')
	                        .closest('.form-group').removeClass('has-error').addClass('has-success');
	                    }
	                }
				 });
			};

			var saveCoupon=function(){
				if (wizform.valid() == false)return false;
				var limitValue=$("input[name=limitValue]").val();
				var limittype=$("[name=limit_group]:checked").val();
				if(limittype=="1"&&(limitValue==""||limitValue=="0"))
				{
					 $("[name=limit_group]").closest('.form-group').removeClass('has-success').addClass('has-error');
					 return false;
				}
				if(limittype=="0"){
					limitValue=0;
				}
	            var coupon={};
	               coupon.couponTitle=$("input[name=couponTitle]").val();
	               coupon.sendNum=$("input[name=sendNum]").val();
	               coupon.faceValue=$("input[name=faceValue]").val();
	               coupon.limitPrice=limitValue;
	               coupon.leadNum=$("input[name=leadNum]").val();
	               coupon.startDate=$("input[name=startDate]").val();
	               coupon.endDate=$("input[name=endDate]").val();
	               coupon.remark=$("[name=remark]").val();
	               coupon.postponeDays=$("[name=postponeDays]").val();
	               coupon.couponType=$("[name=couponType]:checked").val();
	               $.blockUI();
	               $.ajax({
						type: "post",
						url: App.getContextPath() + "admin/coupon/addCoupon.do",
						data:$.param({coupon:JSON.stringify(coupon)}),
						async: true,
						success: function(result) {
						 $.unblockUI();
							location.href="coupon.html";
							}
					});
			};

				return {
					init: function() {
					   formValiInit();
					   $.initDate($("#rangDate"),0,15);

						App.init();
						$(".bt-submit").click(saveCoupon);


						$("[name=couponType]").click(function(){
							var v = $(this).val();
							if(v == 'Postpone') {
								$("[name=sendNum]").attr("disabled","disabled");
								$(".postponeCouponDiv").show();
								$(".constantCouponDiv").hide();
							}else {
								$("[name=sendNum]").removeAttr("disabled");
								$(".postponeCouponDiv").hide();
								$(".constantCouponDiv").show();
							}
						});
					}
				}
			}();
			$(function() {
				$("#header").load("../head.html");
				AddCoupon.init();
			});
		</script>

		<!-- /JAVASCRIPTS -->
	</body>

</html>